<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>计算属性</title>
        <!--第一步：安装Vue.js-->
        <script src="./vue.js"></script>
    </head>
    <body>
        <!--第三步：创建HTML模板（根组件）-->
       <div id="app">
          firstName:<input v-model = "firstName"/> <br>
          lastName:<input v-model = "lastName"/> <br>
          【插值语法】fullName:{{firstName + ' - ' + lastName}}<br>

          【计算属性】fullName: {{fullName}}<br>
          【计算属性】fullName: {{fullName}}<br>
          【计算属性】fullName: {{fullName}}<br>

          【方法】fullName: {{getFullName() }}<br>
          【方法】fullName: {{getFullName() }}<br>
          【方法】fullName: {{getFullName() }}<br>

          <p style="color: red;">
            计算属性vs方法：
            1、调用次数不同
                计算属性被访问多次时，只调用一次
                方法被访问多少次就会被调用多少次
        </p>
       </div>

    </body>
    <script>
        //第二步：创建Vue的应用实例
        const app = Vue.createApp({
           data(){//定义所需的状态变量
              return{
                  firstName: '',
                  lastName: ''
              }
           },
           computed: {
           // fullName(){//默认只读计算属性，以方法的形式进行定义，方法名就是计算属性名，访问计算属性时像访问其他响应式状态一样
           //     console.log(Date.now() + ' ' + '【计算属性】fullName....')
            //    return Date.now() + ' ' + this.firstName + ' - ' +this.lastName;
           // }
           fullName:{//可写的计算属性，它是一个对象，对象中提供了2个方法：get、set
            get(){
                return Date.now() + ' ' + this.firstName + ' - ' +this.lastName;
            },
            set(newVal){//写函数，newVal是接收的参数，可以任意命名
               console.log('fullName.set() newVal= ',newVal);
               const arr = newVal.split('');
               console.log(arr[0],arr[1]);
               //以前赋值
               //this.firstName = arr[0];
               //this.lastName = arr[1];
               //ES6数组结构语法
               [this.firstName,this.lastName] = arr; 
            }
           }
           },
           methods: {
            getFullName(){
            console.log(Date.now() + ' ' + '【方法】fullName....')
            return Date.now() + ' ' + this.firstName + ' # ' +this.lastName;
            }   
        }
        });
      //第四步：在根元素上挂载应用实例，返回根组件实例对象
      const vm = app.mount("#app");//const app = Vue.createApp({}).mount("#app");
    </script>
</html>